<template>
	<div style="height: 100%;">
		<section class="loginContainer">
		  <div class="loginInner">
		    <div class="login_header">
		      <h2 class="login_logo">硅谷外卖</h2>
		      <div class="login_header_title">
		        <a href="javascript:;" :class="{on:flag}" @click="flag = true">短信登录</a>
		        <a href="javascript:;" :class="{on:!flag}" @click="flag = false">密码登录</a>
		      </div>
		    </div>
		    <div class="login_content">
		      <form @submit.prevent="valited">
		        <div :class="{on:flag}">
					<!-- 手机号登录 -->
		          <section class="login_message">
		            <input type="text" placeholder="手机号" v-model="phone">
		            <button @click.prevent="getCode" :disabled="!checkPhone" class="get_verification" :class="{phoneRight:checkPhone}">{{seconds>0?`${seconds}秒`:'获取验证码'}}</button>
		          </section>
		          <section class="login_verification">
		            <input type="text" maxlength="8" placeholder="验证码" v-model="code">
		          </section>
		          <section class="login_hint">
		            温馨提示：未注册硅谷外卖帐号的手机号，登录时将自动注册，且代表已同意
		            <a href="javascript:;">《用户服务协议》</a>
		          </section>
		        </div>
		        <div :class="{on:!flag}">
		          <section>
					  <!-- 账号密码验证码登录 -->
		            <section class="login_message">
		              <input type="text" maxlength="11" placeholder="手机/邮箱/用户名" v-model="name">
		            </section>
		            <section class="login_verification">
		              <input type="text" placeholder="密码" v-model="pwd" v-if="pwdShow">
		              <input type="password" placeholder="密码" v-model="pwd" v-else>
		              <div class="switch_button" :class="pwdShow?'on':'off'" @click="showPwdChange">
		                <div class="switch_circle" :class="{right:pwdShow}"></div>
		                <span class="switch_text">{{pwdShow?'abc':''}}</span>
		              </div>
		            </section>
		            <section class="login_message">
		              <input type="text" maxlength="6" placeholder="验证码" v-model="captcha">
		              <img ref="refreshCaptcha" @click="refreshCaptcha" class="get_verification" src="http://localhost:4000/captcha" alt="captcha">
		            </section>
		          </section>
		        </div>
		        <button class="login_submit">登录</button>
		      </form>
		      <a href="javascript:;" class="about_us">关于我们</a>
		    </div>
		    <a href="javascript:" class="go_back" @click="$router.back()">
		      <i class="iconfont icon-jiantou2"></i>
		    </a>
		  </div>
		</section>
		<alertTip @closeTip="closeTipEvent" v-show="alertTipShow" :alertText="alertTips"/>
	</div>
</template>

<script>
	import alertTip from '../../components/alertTip/index.vue'
	export default{
		name:'Login',
		components:{
			alertTip
		},
		data(){
			return{
				flag:true, // 控制手机号登录还是密码登录的变量值
				pwdShow:false, // 密码的显示与隐藏文本框
				seconds:0, // 节流的秒数
				alertTipShow:false, // 控制提示框的变量
				alertTips:'', // 校验提示的文本
				// 手机号登录
				phone:'13266325261', // phone
				code:'123456' ,// phoneCode
				// 账号密码登录
				name:'abc',
				pwd:'123',
				captcha:'' ,// pictureCode
				errorCount:0,
			}
		},
		computed:{
			checkPhone(){
				let reg = /^1[3-9]{1}\d{9}$/
				return reg.test(this.phone)
			}
		},
		methods:{
			// 获取手机验证码 + 节流
			getCode(){
				if(!this.phone) return
				if(!this.seconds){ // 0 = false, 取反 = true 执行, 有秒数时为true取反为false则不执行
					this.seconds = 5
					 this.timer = setInterval(()=>{
						this.seconds--
						console.log(this.seconds,typeof this.seconds)
						if(this.seconds <= 0){
							console.log('clear')
							clearInterval(this.timer)
						}
					},1000)
				}
			},
			// 账号登录-显示与隐藏密码
			showPwdChange(){
				this.pwdShow = !this.pwdShow
			},
			// 简单的检验规则
			async valited(){
				let result = null; // 存储手机号码登录的结果,或用户名密码登录的结果
				if(this.flag){ // 手机号登录验证
					if(!this.phone){
						this.alertTipEvent('手机号码不能为空')
					}else if(!this.checkPhone){
						// 手机号校验失败
						this.alertTipEvent('手机号码不正确')
					}else if(!this.code){
						this.alertTipEvent('验证码不能为空')
					}else if(!/\d{6}/.test(this.code)){
						this.alertTipEvent('验证码格式不正确')
					}else{
						// ajax…… , 最后无论成功与失败的登录都需要清除掉定时器
						if(this.code === '123456'){
							result = await this.$store.dispatch('reqUserInfoPhone')
						}else{
							this.alertTipEvent('验证码不正确')
							return
						}
						// mock 模拟数据
						if(result.code !== 0){
							this.alertTipEvent('登录失败')
						}
						clearInterval(this.timer)
						this.seconds = 0
					}
				}else{ // 账号密码登录验证
					if(!this.name){
						this.alertTipEvent('账号不能为空')
					}else if(!this.pwd){
						// 手机号校验失败
						this.alertTipEvent('密码不能为空')
					}else if(!this.captcha){
						// 手机号校验失败
						this.alertTipEvent('验证码不能为空')
					}else{
							// 发起登录请求
							result = await this.$store.dispatch('reqUserInfoUname',{
								name:this.name,
								pwd:this.pwd,
								captcha:this.captcha
							 })
							// 判断请求是否失败了
							if(result.code !== 0){
								this.captcha = '' // 清空输入框
								this.alertTipEvent(result.msg) // 提示验证码输入错误
								this.refreshCaptcha() // 重新刷新图片验证码
							}
					}
				}
				console.log(result)
				// 统一进行存储vuex操作
				if(result && result.code === 0 && result.data.name){
					// 登录成功后进行保存用户信息操作(账号密码登录)
					this.$store.dispatch('SetUserInfoUname',result.data)
				}else{
					// 登录成功后进行保存用户信息操作(手机号登录)
					this.$store.dispatch('SetUserInfoPhone',result.data)
				}
				// 跳转到个人页面
				result.data._id &&  this.$router.replace('/profile')	
			},
			// 封装提示文本和显示提示框
			alertTipEvent(msg){
				this.alertTipShow = true
				this.alertTips = msg
			},
			// 关闭校验账号密码对话框
			closeTipEvent(){
				this.alertTipShow = false
			},
			// 刷新图片验证码
			refreshCaptcha(){
				console.log(this.$refs.refreshCaptcha.src)
				this.$refs.refreshCaptcha.src = 'http://localhost:4000/captcha?time=' + Date.now()
			},
		}
	}
</script>
<style scoped>
	.phoneRight{
		color: black !important;
	}
	.right{
		transform:translateX(27px);
		transition: all .5s;
	}
	.switch_circle{
		transition: all .3s;
	}
</style>
<style lang="stylus">
	@import '../../common/stylus/mixins.styl'
	 .loginContainer
	   width 100%
	   height 100%
	   background #fff
	   .loginInner
	     padding-top 60px
	     width 80%
	     margin 0 auto
	     .login_header
	       .login_logo
	         font-size 40px
	         font-weight bold
	         color #02a774
	         text-align center
	       .login_header_title
	         padding-top 40px
	         text-align center
	         >a
	           color #333
	           font-size 14px
	           padding-bottom 4px
	           &:first-child
	             margin-right 40px
	           &.on
	             color #02a774
	             font-weight 700
	             border-bottom 2px solid #02a774
	     .login_content
	       >form
	         >div
	           display none
	           &.on
	             display block
	           input
	             width 100%
	             height 100%
	             padding-left 10px
	             box-sizing border-box
	             border 1px solid #ddd
	             border-radius 4px
	             outline 0
	             font 400 14px Arial
	             &:focus
	               border 1px solid #02a774
	           .login_message
	             position relative
	             margin-top 16px
	             height 48px
	             font-size 14px
	             background #fff
	             .get_verification
	               position absolute
	               top 50%
	               right 10px
	               transform translateY(-50%)
	               border 0
	               color #ccc
	               font-size 14px
	               background transparent
	           .login_verification
	             position relative
	             margin-top 16px
	             height 48px
	             font-size 14px
	             background #fff
	             .switch_button
	               font-size 12px
	               border 1px solid #ddd
	               border-radius 8px
	               transition background-color .3s,border-color .3s
	               padding 0 6px
	               width 30px
	               height 16px
	               line-height 16px
	               color #fff
	               position absolute
	               top 50%
	               right 10px
	               transform translateY(-50%)
	               &.off
	                 background #fff
	                 .switch_text
	                   float right
	                   color #ddd
	               &.on
	                 background #02a774
	               >.switch_circle
	                 position absolute
	                 top -1px
	                 left -1px
	                 width 16px
	                 height 16px
	                 border 1px solid #ddd
	                 border-radius 50%
	                 background #fff
	                 box-shadow 0 2px 4px 0 rgba(0,0,0,.1)
	           .login_hint
	             margin-top 12px
	             color #999
	             font-size 14px
	             line-height 20px
	             >a
	               color #02a774
	         .login_submit
	           display block
	           width 100%
	           height 42px
	           margin-top 30px
	           border-radius 4px
	           background #4cd96f
	           color #fff
	           text-align center
	           font-size 16px
	           line-height 42px
	           border 0
	       .about_us
	         display block
	         font-size 12px
	         margin-top 20px
	         text-align center
	         color #999
	     .go_back
	       position absolute
	       top 5px
	       left 5px
	       width 30px
	       height 30px
	       >.iconfont
	         font-size 20px
	         color #999
</style>